---
title: Styling heatmaps
description: Custom styling of heatmap gradients with the <code>L.heat</code> options. More information about Feature Layers can be found in the <a href="../api-reference/layers/feature-layer.html">L.esri.FeatureLayer</a> documentation.
layout: example.hbs
---

<!-- Include Leaflet.heat via rawgit.com
in production you'd be better off hosting this library yourself -->
<script src="https://rawgit.com/Leaflet/Leaflet.heat/gh-pages/dist/leaflet-heat.js"></script>

<!-- Load Heatmap Feature Layer from CDN -->
<script src="https://unpkg.com/esri-leaflet-heatmap@2.0.0"></script>

<div id="map"></div>

<script>
  var map = L.map('map').setView([ 40.706, -73.926], 14);

  L.esri.basemapLayer('Gray').addTo(map);

  // new constructor syntax at 2.0.0
  L.esri.Heat.featureLayer({
    url: 'https://services.arcgis.com/rOo16HdIMeOBI4Mb/ArcGIS/rest/services/Graffiti_Reports/FeatureServer/0',
    radius: 14,
    gradient: {
      0.2: '#ffffb2',
      0.4: '#fd8d3c',
      0.6: '#fd8d3c',
      0.8: '#f03b20',
      1: '#bd0026'
    }
  }).addTo(map);
</script>
